<template>
    <div class="notice-list" v-loading="loading">
        <common-list @search="search" @resert="resert" ref="commonListRef">
            <template #operate="{ scope }">
                <el-button
                    v-if="store.btns.find((item) => item.name === '设备台账')"
                    link
                    type="primary"
                    size="small"
                    @click="toEquipmentLedger(1, scope.scope.row.id, scope.scope.row.equipmentTypeConfig)"
                    >设备台账</el-button
                >
                <div v-if="store.btns.find((item) => item.name === '设备台账')" class="line" />
                <el-button v-if="store.btns.find((item) => item.name === '备件信息')" link type="primary" size="small">备件信息</el-button>
                <div v-if="store.btns.find((item) => item.name === '备件信息')" class="line" />
                <el-button v-if="store.btns.find((item) => item.name === '设计资料')" link type="primary" size="small" @click="toDesignInformation(scope.scope.row.resourceId)">设计资料</el-button>
                <div v-if="store.btns.find((item) => item.name === '设计资料')" class="line" />
                <el-button v-if="store.btns.find((item) => item.name === '实时工况')" link type="primary" size="small" @click="toConditionStatistic(scope.scope.row.areaLocation, scope.scope.row.code)"
                    >实时工况</el-button
                >
                <div v-if="store.btns.find((item) => item.name === '实时工况') && store.btns.find((item) => item.name === '维保记录')" class="line" />
                <el-button v-if="store.btns.find((item) => item.name === '维保记录')" link type="primary" size="small" @click="toMaintenanceManage(scope.scope.row.areaLocation, scope.scope.row.id)"
                    >维保记录</el-button
                >
            </template>
            <template #state="{ scope }">
                <div v-if="scope.scope.row.state == 0">
                    <div class="stop">停止</div>
                </div>
                <div v-else-if="scope.scope.row.state == 1">
                    <div class="run">运行</div>
                </div>
            </template>
            <template #btns>
                <div class="switchover">
                    <i class="iconfont icon-qiehuan" @click="switchover" style="cursor: pointer"></i>
                    <div class="btns">
                        <w-button v-if="switchoverState && store.btns.find((item) => item.name === '设计资料')" @click="toDesignInformation('')" style="margin-right: 16px">设计资料</w-button>
                        <el-button type="primary" @click="openDialog" v-if="store.btns.find((item) => item.name === '新增设备')">新增设备</el-button>
                        <w-button @click="allDeletes" v-if="store.btns.find((item) => item.name === '批量删除')">批量删除</w-button>
                    </div>
                </div>
            </template>
            <template #anotherWrapper>
                <div v-loading="anotherWrapperLoading" class="anotherWrapper" style="height: calc(100% - 70px)">
                    <el-row style="width: 100%" :gutter="16">
                        <el-col v-for="(item, index) in tableData" style="padding-bottom: 16px" :span="8">
                            <div class="bg">
                                <div class="box">
                                    <div class="row">
                                        <div style="display: flex">
                                            <div class="flex">
                                                <div class="serialNumber">
                                                    <div>{{ index + 1 }}</div>
                                                </div>
                                                <div class="equipmentNumber">{{ item.name }}</div>
                                            </div>
                                            <div class="equipmentState">
                                                <div v-if="item.state == 0" class="stop">停止</div>
                                                <div v-else-if="item.state == 1" class="run">运行</div>
                                                <!-- <div v-else class="malfunction">故障</div> -->
                                            </div>
                                        </div>
                                        <div style="display: flex; align-items: center">
                                            <i class="iconfont icon-dingwei" style="font-size: 12px; color: #595959"></i>
                                            <div style="font-size: 14px; color: #595959; margin-left: 4px">{{ item.areaLocationName }}</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <el-row style="width: 100%">
                                            <el-col :span="12">
                                                <i class="iconfont icon-shebeibianhao icon"></i>
                                                <text class="title">设备编号</text>
                                                <text class="content">{{ item.code }}</text>
                                            </el-col>
                                            <el-col :span="12">
                                                <i class="iconfont icon-shebeimingcheng icon"></i>
                                                <text class="title">设备名称</text>
                                                <text class="content">{{ item.name }}</text>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div class="row">
                                        <el-row style="width: 100%">
                                            <el-col :span="12">
                                                <i class="iconfont icon-shebeiguige icon"></i>
                                                <text class="title">设备规格</text>
                                                <text class="content">{{ item.specification }}</text>
                                            </el-col>
                                            <el-col :span="12">
                                                <i class="iconfont icon-gongzuojibie icon"></i>
                                                <text class="title">工作级别</text>
                                                <text class="content">{{ item.level }}</text>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="row">
                                        <div v-if="store.btns.find((item) => item.name === '设备台账')" class="operate" @click="toEquipmentLedger(1, item.id, item.equipmentTypeConfig)">设备台账</div>
                                        <div v-if="store.btns.find((item) => item.name === '备件信息')" class="operate">备件信息</div>
                                        <div v-if="store.btns.find((item) => item.name === '设计资料')" class="operate" @click="toDesignInformation(item.resourceId)">设计资料</div>
                                        <div v-if="store.btns.find((item) => item.name === '实时工况')" class="operate" @click="toConditionStatistic(item.areaLocation, item.code)">实时工况</div>
                                        <div v-if="store.btns.find((item) => item.name === '维保记录')" class="operate" @click="toMaintenanceManage(item.areaLocation, item.id)">维保记录</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8" style="padding-bottom: 16px">
                            <div class="bg">
                                <div class="box" style="display: flex; flex-direction: column; align-items: center; height: 170px; padding: 0">
                                    <img src="@/assets/image/equipmentManagement/noneEquipment.png" style="height: 160px" />
                                    <text class="noneEquipment">设备待接入</text>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </template>
        </common-list>
    </div>
</template>

<script setup>
import { provide, reactive, ref, onMounted } from "vue";
import { tableConfig, formConfig } from "./config";
import { getequipmentmanagementpage, getequipmenttypelist, getequipmentarealocationlist, batchdeleteequipmentmanagement } from "@/service/api/equipmentManagement.js";
import { mainStore } from "@/store/main.js";
import { useRouter } from "vue-router";
import wButton from "@/components/wButton.vue";

const store = mainStore();
const router = useRouter();
const commonListRef = ref(null);
const formData = reactive({ equipmentType: "", areaLocation: "" });
const switchoverState = ref(false);
const tableData = ref();
const loading = ref(false);
const anotherWrapperLoading = ref(true);

getequipmentmanagementpage({ equipmentType: "", areaLocation: "", pageNum: 1, pageSize: 10 })
    .then((res) => {
        if (res.code === 200) {
            tableData.value = res.data.list;
        }
        anotherWrapperLoading.value = false;
    })
    .catch(() => {
        anotherWrapperLoading.value = false;
    });
getequipmenttypelist().then((res) => {
    if (res.code === 200) {
        formConfig[0].options = res.data.map((item) => ({ label: item.name, value: item.value }));
    }
});
getequipmentarealocationlist().then((res) => {
    if (res.code === 200) {
        formConfig[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
    }
});

onMounted(() => {
    document.querySelector(".wrapper-left").style.height = "auto";
});

const openDialog = () => {
    toEquipmentLedger(0, null);
};
const toEquipmentLedger = (type, id, code) => {
    router.push("/main/equipmentManagement/equipmentLedger?type=" + type + "&id=" + id);
};
const toDesignInformation = (resourceId) => {
    router.push("/main/equipmentManagement/designInformation?resourceId=" + resourceId);
};
const toMaintenanceManage = (areaLocation, equipmentId) => {
    router.push("/main/maintenanceManage?areaLocation=" + areaLocation + "&equipmentId=" + equipmentId);
};
const toConditionStatistic = (areaLocation, code) => {
    router.push("/main/conditionStatistic?areaLocation=" + areaLocation + "&code=" + code);
};
const search = () => {
    anotherWrapperLoading.value = true;
    getequipmentmanagementpage(formData)
        .then((res) => {
            if (res.code === 200) {
                tableData.value = res.data.list;
            }
            anotherWrapperLoading.value = false;
        })
        .catch(() => {
            anotherWrapperLoading.value = false;
        });
};
const switchover = () => {
    tableData.value = commonListRef.value.tableRef.tableData;
    switchoverState.value = !switchoverState.value;
    if (switchoverState.value) {
        document.querySelector(".w-table").style.display = "block";
        document.querySelector(".anotherWrapper").style.display = "none";
        document.querySelector(".wrapper-left").style.height = "100%";
    } else {
        document.querySelector(".w-table").style.display = "none";
        document.querySelector(".anotherWrapper").style.display = "block";
        document.querySelector(".wrapper-left").style.height = "auto";
    }
};
const allDeletes = () => {
    const choose = commonListRef.value.tableRef.allSelectTable.flat().map((item) => item.id);
    if (choose.length == 0) {
        ElMessage({
            message: "请选中需要删除的数据再进行批量删除",
            type: "warning"
        });
        return;
    }
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        batchdeleteequipmentmanagement({
            ids: choose.join()
        })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                }

                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};

provide("formData", formData);
provide("formConfig", formConfig);
provide("tableConfig", tableConfig);
provide("apiFn", getequipmentmanagementpage);
// provide("requestBody", "query");
// provide("includeName", ["projectId"]);
provide("title", "台账明细");
</script>

<style lang="less" scoped>
.icon {
    color: #00428e;
}
.noneEquipment {
    font-size: 14px;
    font-weight: 400;
    color: #d7e8f3;
    position: relative;
    bottom: 30px;
}
.malfunction {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    background: #ffdbdc;
    font-size: 12px;
    font-weight: 400;
    color: #ff4d4f;
}
.run {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    background: rgba(160, 217, 17, 0.2);
    font-size: 12px;
    font-weight: 400;
    color: #a0d911;
}
.stop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    background: rgba(255, 197, 63, 0.2);
    font-size: 12px;
    font-weight: 400;
    color: #ffc53f;
}
.switchover {
    display: flex;
}
.operate {
    font-size: 14px;
    font-weight: 400;
    color: #4ba6dd;
    cursor: pointer;
}
.title {
    font-size: 14px;
    font-weight: 600;
    color: #00428e;
}
.content {
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    padding-left: 8px;
}
.row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
}
.flex {
    display: flex;
    align-items: center;
}

.divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 0 0 16px 0;
    background-color: #ebebeb;
}
::v-deep(.wrapper) {
    .list-title {
        .title {
            width: 80px;
        }
        .switchover {
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
    }
}
.anotherWrapper::-webkit-scrollbar {
    width: 4px;
}
.anotherWrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}
.anotherWrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}
::v-deep(.w-table) {
    display: none;
}
.anotherWrapper {
    display: block;
    overflow: auto;
    .bg {
        background: #ffffff;
        border: 1px solid #ecf1f3;
        .box {
            padding: 16px 16px 0;
            .serialNumber {
                width: 16px;
                height: 16px;
                background: #00428e;
                color: #ffffff;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .equipmentNumber {
                font-size: 16px;
                font-weight: 600;
                color: #1b3646;
                padding-left: 8px;
            }
            .equipmentState {
                margin-left: 4px;
                .operation {
                    font-size: 12px;
                    font-weight: 400;
                    background: #ecf8d0;
                    color: #a0d911;
                    padding: 2px 8px;
                }
            }
        }
    }
}
.notice-list {
    height: 100%;
    .line {
        display: inline-block;
        margin: 0 13px;
        width: 1px;
        height: 8px;
        border: 1px solid #dcdcdc;
    }
    .btns {
        display: flex;
        .resert {
            border: 1px solid @main-color;
            color: @main-color;
        }
    }
}
.button {
    display: flex;
    justify-content: center;
}
.close {
    margin-left: 8px;
    width: 78px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.closeText {
    color: #00428e;
    font-size: 14px;
    font-weight: 400;
}
.submit {
    width: 80px;
    height: 32px;
    background: #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.submitText {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
</style>
<style>
.el-message-box__btns {
    justify-content: center;
}
.el-message-box__title {
    font-weight: 600;
    color: #1b3646;
}
.el-message-box__message {
    color: #1b3646;
}
.el-message-box__btns .el-button--primary {
    background-color: #00428e;
}
</style>
